<template>
  <div class="body-container">
    <div class="block">
      <el-carousel trigger="click" height="460px">
        <el-carousel-item v-for="(item, i) in imgdata" :key="i">
          <img :src="item" alt=""  width="100%"/>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="tip">
      <a class="tip-item" @click="tp('/yuesao')">
        <div class="pic pic1"></div>
        <div class="title">保洁服务</div>
        <div class="words">日常深度清洁</div>
      </a>
      <a class="tip-item" @click="tp('/baojie')">
        <div class="pic pic2"></div>
        <div class="title">金牌月嫂</div>
        <div class="words">新生儿|新妈妈护理</div>
      </a>
      <a class="tip-item" @click="tp('jiazhen')">
        <div class="pic pic3" style="width:50px"></div>
        <div class="title">专业家政</div>
        <div class="words">做饭保洁 小时工</div>
      </a>
      <a class="tip-item">
        <div class="pic pic4"></div>
        <div class="title">高级育婴师</div>
        <div class="words">0-1岁科学育婴</div>
      </a>
      <a class="tip-item">
        <div class="pic pic5"></div>
        <div class="title">育儿嫂</div>
        <div class="words">照顾1-3岁宝宝</div>
      </a>
      <a class="tip-item">
        <div class="pic pic6"></div>
        <div class="title">陪护护理</div>
        <div class="words">老人陪护护理</div>
      </a>
      <a class="tip-item">
        <div class="pic pic7"></div>
        <div class="title">住家保姆</div>
        <div class="words">全天在家周到服务</div>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgdata: [
        "http://res0.chenxin99.com/images/slider/slide-7.jpg",
        "http://res0.chenxin99.com/images/slider/slide-2.jpg",
        "http://res0.chenxin99.com/images/slider/slide-10.jpg",
        "http://res0.chenxin99.com/images/slider/slide-1.jpg",
      ],
    };
  },
  methods:{
    tp(item){
      this.$router.push(item)
    }
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
}
.body-container{
  position: relative;
  z-index: 1;
}
.tip {
  display: flex;
  width: 90%;
  margin: 0 auto;
  margin-top: 30px;
  justify-content: space-between;
}
.tip-item {
  width: 13%;
  text-align: center;
  padding-top: 15px;
  display: block;
  border: 1px solid #f5f5f5;
  border-radius: 35px;
}
.pic {
  display: inline-block;
  transition: 1.5s;
  height: 60px;
  width: 67px;
  margin-bottom: 8px;
}
.pic1 {
  background: url(http://res.chenxin99.com/images/index/index_min.png) no-repeat
    0 -420px;
  background-size: 222px 693px;
}
.pic2 {
  background: url(http://res.chenxin99.com/images/index/index_min.png) no-repeat
    0 -360px;
  background-size: 222px 693px;
}
.pic3 {
  background: url(http://res.chenxin99.com/images/index/index_min.png) no-repeat
    0 -180px;

  background-size: 222px 693px;
}
.pic4 {
  background: url(http://res.chenxin99.com/images/index/index_min.png) no-repeat
    0 -300px;

  background-size: 222px 693px;
}
.pic5 {
  background: url(http://res.chenxin99.com/images/index/index_min.png) no-repeat
    0 -240px;

  background-size: 222px 693px;
}
.pic6 {
  background: url(http://res.chenxin99.com/images/index/index_min.png) no-repeat
    0 -480px;

  background-size: 222px 693px;
}
.pic7 {
  background: url(http://res.chenxin99.com/images/index/index_min.png) no-repeat
    0 -540px;

  background-size: 222px 693px;
}
.pic1:hover,.pic2:hover,.pic3:hover,.pic4:hover,.pic5:hover,.pic6:hover,.pic7:hover {
  cursor: pointer;
  transform: rotate(360deg);
}
.title {
  color: #666;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
}
.words {
  color: #999;
  cursor: pointer;
}
.title:hover,
.words:hover {
  color: #337ab7;
}
</style>